<template>
	<view class="detail">
		<scroll-view class="tab-scroll-sticky" id="tabs" scroll-y="true" @scroll="tabScoll" :scroll-top="scrollInto" style="height: calc(100vh - 130rpx - env(safe-area-inset-bottom))">
			<view class="scroll-content">
				<!-- <view class="scroll-tab" :class="[barshow?'scroll-tab-fixed':'scroll-tab-static']"> -->
				<view class="scroll-tab scroll-tab-fixed">
					<up-icon @click="onBack" :name="pages.length > 1 ? 'arrow-left' : 'home'" size="22"
						color="#ffffff"></up-icon>
					<view class="sroll-tab-right" v-if="isShowNavbar">
						<view class="scroll-tab-list" v-for="(item,index) in tabList"
							:class="{'active': activeTab == index}" @click="changeTab(index)" :id="'tabs'+index"
							:key="index">
							<text class="scroll-tab-list-text">{{item.text}}</text>
						</view>
					</view>
				</view>
			</view>

			<view id="scrollTop" class="top-main">
				<view class="goods-name">日本 旅游签·三年多次入境【广州领取】下单先咨询·勿提前邮寄·不收急件·福建暂无法办理</view>
				<view class="goods-tags">
					<view class="tag-item">拒签退全款</view>
				</view>
				<view class="goods-info">
					<view class="goods-info-item">
						<view class="info-item-value">5875</view>
						<view class="info-item-name">已办理人数</view>
					</view>
					<view class="goods-info-item">
						<view class="info-item-value">98%</view>
						<view class="info-item-name">综合出签率</view>
					</view>
					<view class="goods-info-item">
						<view class="info-item-value">
							<u-rate active-color="#ffffff" inactive-color="#b2b2b2" gutter="2" v-model="rateValue"
								size="14"></u-rate>
						</view>
						<view class="info-item-name">评价(0)</view>
					</view>
				</view>
			</view>
			<view class="scroll-warp">
				<view class="scroll-warp-list" id="wrap0">
					<view class="card-box">
						<view class="card-top">
							<up-icon name="bell-fill" size="23" color="#ffd400"></up-icon>
							<view class="card-desc">
								办理时长 <view class="time">13-15 个工作日</view>
								<up-icon name="question-circle" color="#999999" size="18"></up-icon>
							</view>
						</view>
						<view class="goods-price-box">
							<view class="price-left">
								<text class="price">648</text>
								<text class="price-unit">/人</text>
							</view>
							<view class="price-right">价格明细</view>
						</view>
						<view class="card-bottom">
							<view class="bottom-item">
								<view class="bottom-item-value">5 年</view>
								<view class="bottom-item-name">有效限期</view>
							</view>
							<view class="bottom-item">
								<view class="bottom-item-value">90 天</view>
								<view class="bottom-item-name">停留时长</view>
							</view>
							<view class="bottom-item">
								<view class="bottom-item-value">多次</view>
								<view class="bottom-item-name">入境次数</view>
							</view>
						</view>
					</view>
					<view class="goods-describe-box">
						<view class="describe-left">
							<image class="describe-icon" src="@/static/images/goods/icon_xunz.png" mode="aspectFill">
							</image>
							<view class="describe-list">
								<view class="describe-item" v-for="(describe, index) in describeList" :key="index">
									{{describe}}
									<text class="unit" v-if="index < (describeList.length-1)">|</text>
								</view>
							</view>
						</view>
						<view class="describe-btn">说明 <up-icon name="arrow-right" size="14" color="#000000"></up-icon>
						</view>
					</view>
				</view>
				<view class="scroll-warp-list" id="wrap1">
					<view class="card-main">
						<view class="card-top-box">办理流程</view>
						<view class="step-box">
							<view class="step-list">
								<view class="step-item">
									<view class="step-icon">
										<view class="icon-box">
											<image class="icon" src="@/static/images/goods/icon_sc.png"></image>
										</view>
										<view class="arrow-box">
											<up-icon name="arrow-right" size="12" color="#e04b4b"></up-icon>
										</view>
									</view>
									<view class="step-name">上传资料</view>
								</view>
								<view class="step-item">
									<view class="step-icon">
										<view class="icon-box">
											<image class="icon" src="@/static/images/goods/icon_tj.png"></image>
										</view>
										<view class="arrow-box">
											<up-icon name="arrow-right" size="12" color="#e04b4b"></up-icon>
										</view>
									</view>
									<view class="step-name">提交订单</view>
								</view>
								<view class="step-item">
									<view class="step-icon">
										<view class="icon-box">
											<image class="icon" src="@/static/images/goods/icon_sh.png"></image>
										</view>
										<view class="arrow-box">
											<up-icon name="arrow-right" size="12" color="#e04b4b"></up-icon>
										</view>
									</view>
									<view class="step-name">审核办理</view>
								</view>
								<view class="step-item">
									<view class="step-icon">
										<view class="icon-box">
											<image class="icon" src="@/static/images/goods/icon_ps.png"></image>
										</view>
									</view>
									<view class="step-name">出签配送</view>
								</view>
							</view>
							<view class="more-btn">详细办理流程 <up-icon name="arrow-right" size="12"
									color="#000000"></up-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="scroll-warp-list" id="wrap2">
					<view class="card-main">
						<view class="card-top-box">
							<text>所需资料（14）</text>
							<view class="more-btn">在职人员 切换<up-icon name="arrow-right" size="12"
									color="#ffffff"></up-icon></view>
						</view>
						<view class="card-content">
							<information></information>
							<view class="more-btn">资料详细要求 <up-icon name="arrow-right" size="12"
									color="#000000"></up-icon>
							</view>
						</view>
					</view>
				</view>

				<view class="scroll-warp-list" id="wrap3">
					<view class="card-main">
						<view class="card-top-box">
							<text>办理须知</text>
						</view>
						<view class="card-content">
							<view class="card-content-title">
								<image class="title-icon" src="@/static/images/goods/icon_yaodian.png"></image>
								<text class="title">签证属性</text>
							</view>
							<view class="card-table">
								<view class="tr-item">
									<view class="th-box">签证类型</view>
									<view class="td-box">旅游签（贴之签)</view>
								</view>
								<view class="tr-item">
									<view class="th-box">有效期限</view>
									<view class="td-box">使馆批（1-10年不等。通常为10年）</view>
								</view>
								<view class="tr-item">
									<view class="th-box">入境次数</view>
									<view class="td-box">多次</view>
								</view>
								<view class="tr-item">
									<view class="th-box">最长停留</view>
									<view class="td-box">180天</view>
								</view>
								<view class="tr-item">
									<view class="th-box">赴馆要求</view>
									<view class="td-box">申请人无需前往使领馆</view>
								</view>
							</view>

							<view class="card-content-title">
								<image class="title-icon" src="@/static/images/goods/icon_yaodian.png"></image>
								<text class="title">服务包含</text>
							</view>
							<view class="card-content-text">
								签证客服在线服务+签证专家审核资料+签证专家资料操作+领馆签证费代缴+签证材料代递交+护照代取回邮+出签后3个月内赠送1次EV US登记</view>

							<view class="card-content-title">
								<image class="title-icon" src="@/static/images/goods/icon_yaodian.png"></image>
								<text class="title">受理范围</text>
							</view>
							<view class="card-content-text">
								1.免面试需满足以下条件之一:
								(1) 14周岁以下或者80周岁以上的申请人。
								(2) 持有仍在有效期内或过期不超过12个月的美国签证 (中国大陆签发且获批最长有效期) ，本次申请类型需与上次申请类型一致。
								(3) 14周岁以下儿童还必须是至少父母之其中一方有美国签证才可以使用免面谈服务。
								2.注意: 14周岁以下儿童，如果父母一方或双方需申请同一类型的签证并需要前往领馆面谈，儿童材料由父母带去领馆同时递交，儿童无需前往领馆面试。
								3.注意以下情况不能免面试:(1) 上一次签证申请被行政审核过，签证页上有“clearance received”注释，仍需前往使馆面试(2)
								14岁之前获得签证者，超过14岁续签需要面试。
								(3) 含旧美国签证页的护照如遗失，需要重新面试(4) 上一次请美国签证 (含所有类型) 被拒签者需要重新面试
								(5) 曾有不良出境记录 (超期滞留等) 或违法犯罪行为者。
								4.免面签代传递目前需要预约递送 (221g文件或免面谈申请) ，受理时间会对应增加。
								中国大陆地区的申请人可在以下5个中信地点免费领取护照并递交文件 (221g文件或免面谈申请) :
								北京-北京朝阳门北大街8号富华大厦E座1层广州-广州市天河区天河北路233号中信广场东侧首层上海-上海市南京西路1168号中信泰富广场GF沈阳- 沈阳市沈河区大西路336号
								武汉-湖北省武汉市江岸区南京路2号
								如需选择其他中信网点递交 (221g文件，免面谈申请) 文件时需在柜台支付人民币110元5.出签后护照领取方式如下，请准确提供回邮地址:(1) EMS邮寄到家:
								收到护照时需支付110元到付费用给EMS (申请人自费承担，具体费用以实际收取为准
								(2) 中信自取: 在收到领馆的出签邮件后，请在15天内携带本人身份证原件以及一份预约单前往选择的中信银行领取护照:
								D由于取件地址一旦确定将无法修改，烦请慎重选择。
								2中信银行分免费点和收费点，如选择了需要收费的中信地点，需申请人自费领取护照 (一般110元/本具体费用以实际收取为准)
								(3) 我司代取: 包含护照代取和邮寄费用。我司代取时间为每周二和每周五，不接受加急代取，如有紧急需求建议申请人自行领取
								6.根据美国大使馆和领馆要求，申请人在签证申请期间不得要求使用或借用其护照，且不包含加急服务
								申请人也不能提出加急申请。如您有紧急旅行计划请不要下单本商品
							</view>

							<view class="card-content-title">
								<image class="title-icon" src="@/static/images/goods/icon_yaodian.png"></image>
								<text class="title">注意事项</text>
							</view>
							<view class="card-content-text">
								1.预约成功后，如因客户自身原因需更改预约时间,服务费为50元/人/次;如需修改 DS-160 表格，因涉及取消重约，服务费为100元/人/次。
								2.免面试并不能保证一定签发，而且在某些情况下领馆可能还会要求申请人亲自来面试，如您收到领馆通知需要面试请告知我司，我司将帮您预约面试时间。如申请人现有美国签证尚在有效期内，在递交免面谈申请后若被领馆要求面试，原签证页可能会被领馆盖章作废
								(一般标注为"Cancelled without
								prejudice"，表示该签证注销但不会对未来签证申请产生不良影响) ，请知悉
								3.美国签证申请一日缴费成功，无法退还签证费，且预约面试系统只允许改约1次，已经预约过两次再取消预约，收据会显示失效而无法再预约，需要重新缴签证费，费用申请人自理。
								4.如签发了10年有效的B1/B2签证，出行前需登记EVUS信息 (仅大陆护照需登记)
								，在未登记EVUS前请勿支付机票、酒店等费用，以免产生费用损失。注意含EVUS的商品默认使用办签护照登记EVUS，如需换护照信息需额外下单EWLST单
								5.领馆可能会的真实性，保6.美国和加拿美国和加拿大添加到煎贴板
								个人背景信息页事官的工作。因此同时办理人背景信息一致。
								6.在2022年10月1日或之后支付的所有非移民签证申请费 (也称为可机读签证费)
								自生成可机读签证申请费收据之日起365天内有效。申请人必须在此365天内预约面试或提交免面谈申请。2022年10月1日之前生成的所有可机读签证申请费支付收据均延长至2023年9月30日，并一直有效至此日期。8.在签证办理期间，我司可能会根据您的材料情况要求增补其他材料或劝退;领馆也可能针对您的实际情况要求增补其他材料，请申请人配合补交
							</view>

							<view class="more-btn">查看温馨提示 <up-icon name="arrow-right" size="12"
									color="#000000"></up-icon>
							</view>
						</view>
					</view>
					<view class="card-main">
						<view class="card-top-box">
							<text>签证图例</text>
						</view>
						<view class="card-content">
							<image class="goods-detail-img" src="/src/static/images/member-bg.png" mode="widthFix">
							</image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="footer-main">
			<view class="footer-left">
				<button class="btn-item" open-type="contact">
					<image class="btn-icon" src="@/static/images/goods/kefu.png" mode="aspectFill"></image>
					<view class="btn-name">客服</view>
				</button>
				<button class="btn-item" open-type="share">
					<image class="btn-icon" src="@/static/images/goods/fenxiang.png" mode="aspectFill"></image>
					<view class="btn-name">分享</view>
				</button>
			</view>
			<view class="footer-right">
				<view class="confirm-btn">开始办理</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import information from "./components/information.vue"
	import {
		onMounted,
		nextTick,
		getCurrentInstance,
		ref
	} from "vue";
	let pages = ref([]);
	const isShowNavbar = ref(false);
	const id = ref(1);
	let rateValue = ref(5);
	const barshow = ref(false);
	const tabTop = ref(0);
	const activeTab = ref(0);
	const scrollInto = ref(0);
	const tabBarStyle = ref({});
	const warpTop = ref([]);
	const scrollWarp = ref([]);
	const describeList = ref(['拒签退全款', '智能签证照', '手机传资料', '专家预审核']);
	const tabList = ref(
		[{
			text: "商品",
			navTarget: "第一列",
		}, {
			text: "流程",
			navTarget: "第二列",
		}, {
			text: "资料",
			navTarget: "第三列",
		}, {
			text: "须知",
			navTarget: "第四列",
		}]);
	const fixedTop = ref(44);
	const activeColor = ref('red');

	const instance = getCurrentInstance();
	function onBack() {
		if (pages.value.length > 1) {
			uni.navigateBack();
		} else {
			uni.switchTab({
				url: "/pages/index/index"
			})
		}
	}
	function GetRect(selector) {
		return new Promise((resolve) => {
			let view = uni.createSelectorQuery().in(instance)
			view.select(selector).boundingClientRect(rect => {
				resolve(rect)
			}).exec();
		})
	}

	function changeTab(e) {
		activeTab.value = e;
		_getTabRect(activeTab.value);
		if (e == 0) {
			scrollInto.value = warpTop.value[e] - 44;
		} else {
			scrollInto.value = warpTop.value[e] - 88;
		}
	}

	async function _getTabRect(itemIndex) {
		let rect = await GetRect("#tabs" + itemIndex);
		let rect1 = await GetRect("#tabs" + itemIndex + ">.scroll-tab-list-text");
		let width = (rect1.width * 0.67);
		tabBarStyle.value = {
			left: (rect.left + (rect.width - width) / 2) + 'px',
			width: width + 'px',
			background: activeColor.value
		}
	}
	//scroll滚动
	async function tabScoll(e) {
		let scrollTop = e.detail.scrollTop;
		if (scrollTop >= 40) {
			isShowNavbar.value = true;
		} else {
			isShowNavbar.value = false;
		}
		let rect = await GetRect("#scrollTop");
		if (tabTop.value == 0) {
			let rect = await GetRect("#scrollTop");
			tabTop.value = rect.height;
		}
		barshow.value = scrollTop >= tabTop.value ? true : false;
		let scrollTop1 = scrollTop;
		if (scrollTop1 <= warpTop.value[1] - 93) {
			activeTab.value = 0;
			_getTabRect(0);
		}
		if (scrollTop1 > warpTop.value[1] - 93 && scrollTop1 < warpTop.value[2] - 93) {
			activeTab.value = 1;
			_getTabRect(1);
		}
		if (scrollTop1 > warpTop.value[2] - 93 && scrollTop1 < warpTop.value[3] - 93) {
			activeTab.value = 2;
			_getTabRect(2);
		}
		if (scrollTop1 > warpTop.value[3] - 93) {
			activeTab.value = 3;
			_getTabRect(3);
		}
	}
	//获取节点距离顶部距离
	async function barInit() {
		let navTargetTop = [];
		let navTargetTop1 = [];
		let randoms = 93; //顶部栏高度+tab高度+兼容值				
		for (let i = 0; i < tabList.value.length; i++) {
			GetRect("#wrap" + i).then(res => {
				navTargetTop.push(parseInt(res.top))
				navTargetTop1.push(parseInt(res.top) + randoms)
			})
		}
		warpTop.value = navTargetTop;
		scrollWarp.value = navTargetTop1;
	}

	onMounted(async () => {
		pages.value = getCurrentPages(); // 获取当前打开的页面栈列表
		let rect = await GetRect("#scrollTop");
		tabTop.value = rect.height;
		_getTabRect(0);
		barInit();
	})
</script>

<style lang="scss" scoped>
	.top-main {
		box-sizing: border-box;
		background-color: #e04b4b;
		padding: 190rpx 30rpx 30rpx;
		height: 650rpx;
		border-radius: 0 0 40rpx 40rpx;


		.goods-name {
			font-size: 42rpx;
			color: #ffffff;
			margin-bottom: 20rpx;
		}

		.goods-tags {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.tag-item {
				padding: 6rpx 10rpx;
				background-color: rgba(0, 0, 0, 0.2);
				color: #ffffff;
				font-size: 24rpx;
				margin-right: 10rpx;
			}

		}

		.goods-info {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.goods-info-item {
				font-size: 26rpx;
				color: #ffffff;

				.info-item-value {}

				.info-item-name {}
			}
		}
	}

	.card-box {
		width: 94%;
		height: 364rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: -120rpx auto 0;
		border-radius: 20rpx;
		overflow: hidden;

		.card-top {
			padding: 20rpx;
			background-color: #f5f1c6;
			display: flex;
			align-items: center;

			.card-desc {
				margin-left: 10rpx;
				display: flex;
				align-items: center;
				font-size: 30rpx;

				.time {
					color: #e04b4b;
					margin-right: 10rpx;
				}
			}
		}

		.goods-price-box {
			margin: 0 20rpx;
			padding: 40rpx 0;
			border-bottom: 2rpx solid #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.price-left {

				.price {
					font-size: 52rpx;

					&::before {
						content: "￥";
						font-size: 30rpx;
					}
				}

				.price-unit {
					color: #999999;
				}
			}

			.price-right {
				font-size: 26rpx;
				padding: 6rpx 16rpx;
				border-radius: 30rpx;
				border: 2rpx solid #ccc
			}
		}

		.card-bottom {
			margin: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.bottom-item {
				width: calc(100% / 3);
				padding: 20rpx;

				.bottom-item-value {
					font-size: 32rpx;
				}

				.bottom-item-name {
					font-size: 26rpx;
					color: #666666;
				}
			}
		}
	}

	.goods-describe-box {
		padding: 20rpx 10rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.describe-left {
			flex: 1;
			display: flex;
			align-items: center;

			.describe-icon {
				width: 50rpx;
				height: 50rpx;
				margin-right: 10rpx;
			}

			.describe-list {
				display: flex;
				align-items: center;

				.describe-item {
					font-size: 24rpx;
					color: #d8ad00;

					.unit {
						display: inline-block;
						margin: 0 6rpx;
					}
				}
			}
		}

		.describe-btn {
			display: flex;
			align-items: center;
			font-size: 26rpx;
		}
	}

	.flexRowCc {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.scroll-content {
		position: relative;

		.scroll-tab {
			@extend .flexRowCc;
			justify-content: space-between;
			width: 100%;
			height: 190rpx;
			box-sizing: border-box;
			position: relative;
			z-index: 999;
			background-color: #e04b4b;
			padding: 0 20rpx;
			padding-top: calc(var(--status-bar-height) + 30rpx);

			.sroll-tab-right {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 150rpx;
				padding-left: 20rpx;
			}

			.scroll-tab-list {
				font-size: 28rpx;
				color: #ffffff;
			}

			.scroll-tab-list.active {
				font-size: 32rpx;
			}

			&-static {
				position: relative !important;
				top: 0;
			}

			&-fixed {
				position: fixed;
				top: 0;
				left: 0;
			}

			&-list {
				text-align: center;
				font-size: 32rpx;
				flex: 1 1 auto;

				&-text {
					display: inline-block;
				}
			}

			&-bar {
				width: 64rpx;
				height: 4rpx;
				background: rgba(222, 37, 37, 100);
				position: absolute;
				bottom: 8rpx;
				border-radius: 16rpx;
				transition-duration: .5s;
			}
		}
	}

	.scroll-warp-list {

		.card-main {
			margin: 0 30rpx 20rpx;
			border-radius: 20rpx;
			background-color: #ffffff;

			.card-top-box {
				font-size: 36rpx;
				font-weight: bold;
				padding: 20rpx;
				border-bottom: 2rpx solid #f0f0f0;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.more-btn {
					padding: 10rpx 20rpx;
					background-color: #e04b4b;
					border-radius: 40rpx;
					color: #ffffff;
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 28rpx;
				}
			}

			.card-content {
				padding: 20rpx;

				.goods-detail-img {
					width: 100%;
				}

				.card-table {
					border: 2rpx solid #dedcdc;
					border-radius: 6rpx;
					overflow: hidden;
					margin-bottom: 20rpx;

					.tr-item {
						display: flex;
						align-items: center;
						border-bottom: 2rpx solid #dedcdc;

						&:last-child {
							border-bottom: none;
						}

						.th-box {
							font-size: 30rpx;
							width: 220rpx;
							height: 80rpx;
							background-color: #f0f0f0;
							border-right: 2rpx solid #dedcdc;
							color: #666666;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.td-box {
							font-size: 30rpx;
							flex: 1;
							height: 80rpx;
							padding: 0 20rpx;
							display: flex;
							align-items: center;
						}
					}

				}

				.card-content-title {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.title-icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}

					.title {
						font-size: 34rpx;
					}
				}

				.card-content-text {
					color: #666666;
					margin-bottom: 20rpx;
					font-size: 30rpx;
				}
			}

			.step-box {
				padding-bottom: 30rpx;

				.step-list {
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 30rpx;

					.step-item {
						.step-icon {
							display: flex;
							align-items: center;
							margin-bottom: 10rpx;

							.icon-box {
								width: 80rpx;
								height: 80rpx;
								border-radius: 50%;
								border: 2rpx solid #e04b4b;
								display: flex;
								align-items: center;
								justify-content: center;

								.icon {
									width: 50rpx;
									height: 50rpx;
								}
							}

							.arrow-box {
								margin: 0 30rpx;
							}
						}

						.step-name {
							font-size: 26rpx;
							color: #999999;
						}
					}
				}
			}
		}
	}

	.more-btn {
		width: 240rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		background-color: #f0f0f0;
		border-radius: 30rpx;
		margin: 0 auto;
	}

	.scroll-warp {
		height: 100vh;
	}

	.footer-main {
		height: 110rpx;
		background-color: rgba(255, 255, 255, 0.9);
		padding: 10rpx 20rpx calc(10rpx + env(safe-area-inset-bottom));
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.footer-left {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex: 1;
			
			.btn-item{
				width: 90rpx;
				height: 90rpx;
				margin: 0 20rpx;
				
				.btn-icon{
					width: 48rpx;
					height: 48rpx;
				}
				.btn-name{
					font-size: 26rpx;
				}
			}
		}
		.confirm-btn{
			width: 400rpx;
			height: 90rpx;
			background-color: #e04b4b;
			color: #ffffff;
			border-radius: 50rpx;
			line-height: 90rpx;
			text-align: center;
			margin-left: 45rpx;
		}
	}

	button {
		padding: 0;
		margin: 0;
		border: none !important;
		background-color: transparent;
		font: inherit;
	}
	button::after{
		border: none;
	}
</style>